<template>
  <div>
    <el-card>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="待处理" name="1"></el-tab-pane>
        <el-tab-pane label="已解决" name="2"></el-tab-pane>
        <el-tab-pane label="未解决" name="3"></el-tab-pane>
      </el-tabs>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <!-- <el-form-item label="状态">
          <el-select v-model="formInline.status" placeholder="请选择状态">
            <el-option
              v-for="item in statusArr"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="是否出售">
          <el-input
            placeholder="请输入是否出售"
            v-model="formInline.isSale"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否换绑">
          <el-input
            placeholder="请输入是否换绑"
            v-model="formInline.isBand"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="之前绑定的手机号">
          <el-input
            placeholder="请输入之前绑定的手机号"
            v-model="formInline.beforePhone"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList()">搜索</el-button>
          <el-button type="info" @click="chongzhi">重置</el-button>
          <!-- <el-button type="primary" @click="addfn">新增</el-button> -->
          <el-button
            type="primary"
            v-clipboard:copy="copyVlaue"
            v-clipboard:error="onError"
            v-clipboard:success="onCopy"
            @click="fuzhi"
            >复制填报链接</el-button
          >
        </el-form-item>
      </el-form>

      <div>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="id" label="编号" width="88" align="center">
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            width="180"
            align="center"
          >
            <template #default="{ row }">
              <div v-if="row.status == 1" style="color: blue">待处理</div>
              <div v-if="row.status == 2" style="color: green">已解决</div>
              <div v-if="row.status == 3" style="color: red">未解决</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="isSale"
            label="是否出售"
            width="88"
            align="center"
          >
          </el-table-column
          ><el-table-column
            prop="isBand"
            label="是否换绑"
            width="88"
            align="center"
          >
          </el-table-column
          ><el-table-column
            prop="isCheckCode"
            label="是否给过他人验证码"
            width="166"
            align="center"
          >
          </el-table-column
          ><el-table-column
            prop="isOtherPwd"
            label="是否给过他人密码"
            width="166"
            align="center"
          >
          </el-table-column
          ><el-table-column
            prop="beforePhone"
            label="之前绑定的手机号"
            width="166"
            align="center"
          >
          </el-table-column
          ><el-table-column
            prop="loginAddress"
            label="自己的登陆地址是哪里"
            width="166"
            align="center"
          >
          </el-table-column
          ><el-table-column
            prop="phoneType"
            label="手机型号"
            width="126"
            align="center"
          >
          </el-table-column
          ><el-table-column
            prop="lastLoginAddress"
            label="最后一次登录地址"
            width="188"
            align="center"
          >
          </el-table-column
          ><el-table-column
            prop="lastLoginTime"
            label="最后一次登录时间"
            width="188"
            align="center"
          >
          </el-table-column
          ><el-table-column
            prop="isChenMi"
            label="防沉迷是否是自己"
            width="166"
            align="center"
          >
          </el-table-column
          ><el-table-column
            prop="isShenSu"
            label="是否提交申诉"
            width="126"
            align="center"
          >
          </el-table-column
          ><el-table-column
            prop="isOhterLoginTx"
            label="是否给他人扫码登录腾讯会议"
            width="191"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop=""
            label="操作"
            fixed="right"
            width="188"
            align="center"
          >
            <template #default="{ row }">
              <el-button type="text" @click="changefn(row)">修改</el-button>
              <el-button style="color: red" type="text" @click="delfn(row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div style="text-align: right; margin-top: 20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formInline.pageNum"
          :page-sizes="[5, 10, 20, 30, 50]"
          :page-size="form.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 新增或修改 -->
    <el-dialog
      title="找回审核"
      :visible.sync="dialogFormVisible"
      width="666px"
      @close="close"
    >
      <el-form :model="form" label-width="200px">
        <el-form-item label="状态">
          <el-select v-model="form.status" placeholder="请选择状态">
            <el-option
              v-for="item in statusArr"
              :key="item.id"
              :label="item.name"
              :value="item.id + ''"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否出售">
          <el-input
            placeholder="请输入是否出售"
            style="width: 333px"
            v-model="form.isSale"
            autocomplete="off"
            :disabled="flag"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否换绑">
          <el-input
            placeholder="请输入是否换绑"
            style="width: 333px"
            v-model="form.isBand"
            autocomplete="off"
            :disabled="flag"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否给过他人验证码">
          <el-input
            placeholder="请输入是否给过他人验证码"
            style="width: 333px"
            v-model="form.isCheckCode"
            autocomplete="off"
            :disabled="flag"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否给过他人密码">
          <el-input
            placeholder="请输入是否给过他人密码"
            style="width: 333px"
            v-model="form.isOtherPwd"
            autocomplete="off"
            :disabled="flag"
          ></el-input>
        </el-form-item>
        <el-form-item label="之前绑定的手机号">
          <el-input
            placeholder="请输入之前绑定的手机号"
            style="width: 333px"
            v-model="form.beforePhone"
            autocomplete="off"
            :disabled="flag"
          ></el-input>
        </el-form-item>
        <el-form-item label="自己的登陆地址是哪里">
          <el-input
            placeholder="请输入自己的登陆地址是哪里"
            style="width: 333px"
            v-model="form.loginAddress"
            autocomplete="off"
            :disabled="flag"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机型号">
          <el-input
            placeholder="请输入手机型号"
            style="width: 333px"
            v-model="form.phoneType"
            autocomplete="off"
            :disabled="flag"
          ></el-input>
        </el-form-item>
        <el-form-item label="最后一次登录地址">
          <el-input
            placeholder="请输入最后一次登录地址"
            style="width: 333px"
            v-model="form.lastLoginAddress"
            autocomplete="off"
            :disabled="flag"
          ></el-input>
        </el-form-item>
        <el-form-item label="最后一次登录时间">
          <el-date-picker
            v-model="form.lastLoginTime"
            style="width: 333px"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期"
            :disabled="flag"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="防沉迷是否是自己">
          <el-input
            placeholder="请输入防沉迷是否是自己"
            style="width: 333px"
            v-model="form.isChenMi"
            autocomplete="off"
            :disabled="flag"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否提交申诉">
          <el-input
            placeholder="请输入是否提交申诉"
            style="width: 333px"
            v-model="form.isShenSu"
            autocomplete="off"
            :disabled="flag"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否给他人扫码登录腾讯会议">
          <el-input
            placeholder="请输入是否给他人扫码登录腾讯会议"
            style="width: 333px"
            v-model="form.isOhterLoginTx"
            autocomplete="off"
            :disabled="flag"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="okSure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getList, addfnList, detailfnList, editfnList, deletefnList } from '../../api/RetrieveTheAudit/index'
export default {
  data() {
    return {
      formInline: {
        pageNum: 1,
        pageSize: 10,
        status: '1',
        isSale: null,
        isBand: null,
        beforePhone: null,
      },
      gameList: [],//游戏列表
      form: {
        status: null,
        isSale: null,
        isBand: null,
        isCheckCode: null,
        isOtherPwd: null,
        beforePhone: null,
        loginAddress: null,
        phoneType: null,
        lastLoginAddress: null,
        lastLoginTime: null,
        isChenMi: null,
        isShenSu: null,
        isOhterLoginTx: null
      },
      statusArr: [
        { name: '待处理', id: '1' },
        { name: '已解决', id: '2' },
        { name: '未解决', id: '3' }
      ],
      tableData: [],
      total: 0,
      dialogFormVisible: false,
      activeName: '1',
      copyVlaue: '',
      flag: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
      this.formInline.pageNum = 1
      this.formInline.pageSize = 10
      this.formInline.status = tab.name
      this.form.status = tab.name
      this.getList()
    },
    //重置
    chongzhi() {
      this.formInline = {
        pageNum: 1,
        pageSize: 10,
        status: this.formInline.status,
        isSale: null,
        isBand: null,
        beforePhone: null,
      }
      this.getList()
    },
    async getList() {
      const res = await getList(this.formInline)
      console.log(res);
      this.tableData = res.rows
      this.total = res.total
    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.formInline.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.formInline.pageNum = val
      this.getList()
    },
    // 新增
    addfn() {
      this.dialogFormVisible = true
    },
    //新增或修改
    async okSure() {
      if (this.form.id) {
        const res = await editfnList(this.form)
        console.log(res);
      } else {
        const res = await addfnList(this.form)
        console.log(res);
      }
      this.getList()
      this.$message.success('操作成功！')
      this.dialogFormVisible = false
    },
    close() {
      this.dialogFormVisible = false
      this.form = {
        status: null,
        isSale: null,
        isBand: null,
        isCheckCode: null,
        isOtherPwd: null,
        beforePhone: null,
        loginAddress: null,
        phoneType: null,
        lastLoginAddress: null,
        lastLoginTime: null,
        isChenMi: null,
        isShenSu: null,
        isOhterLoginTx: null
      }
    },
    //修改
    async changefn(item) {
      this.dialogFormVisible = true
      this.flag = true
      const res = await detailfnList(item.id)
      console.log(res);
      this.form = res.data
      //   if (this.form.img) {
      //     this.titleImgList.push({ url: this.form.img })
      //   }
    },

    // 复制商品信息
    fuzhi() {
      let hostt = location.origin + '/Retrieve'
      this.copyVlaue = hostt
    },
    // 复制成功和失败的方法
    onCopy(e) {
      this.$modal.msgSuccess("复制成功");
      this.copyVlaue = "";
    },
    onError() {
      this.$modal.msgError("复制失败");
      this.copyVlaue = "";
    },
    // 删除
    async delfn(item) {
      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await deletefnList(item.id)
        console.log(res);
        this.$message.success('删除成功！')
        this.getList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>

<style>
</style>